import { useEffect, useRef, useState } from 'react';
import './rightTop.css'
import * as echarts from 'echarts';
import { getshuidian } from '../../../request/index'
import Myecharts from '../../common/myecharts/myecharts';

// 右上角组件
const RightTop = () => {
    // let Rsd = useRef(null)

    // 电
    let [dianall, setDianall] = useState(0)
    // 水
    let [shuiall, setShuiall] = useState(0)

    const [option, setoption] = useState({
        legend: {
            textStyle: {
                color: '#fff'
            },
            icon: 'circle'
        },
        tooltip: {},
        dataset: {
            dimensions: ['product'],
            source: [
                { product: 'Matcha Latte', 2015: 43.3, 2016: 85.8, 2017: 93.7 },
                { product: 'Milk Tea', 2015: 83.1, 2016: 73.4, 2017: 55.1 },
                { product: 'Cheese Cocoa', 2015: 86.4, 2016: 65.2, 2017: 82.5 },
                { product: 'Walnut Brownie', 2015: 72.4, 2016: 53.9, 2017: 39.1 }
            ]
        },
        xAxis: { type: 'category' },
        yAxis: {},
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
    })

    useEffect(() => {
        // const myChart = echarts.init(Rsd.current);
        getshuidian().then(res => {
            // console.log('水电', res.data.data.result[0])
            // 将后台数据的['教学用水', '安防设备用电', '生态用水', '生活用水']赋值给图例
            // 循环遍历出name放在tuli中
            let tuli = res.data.data.result[0].series.map(item => {
                return item.name
            })
            // 在tuli数据中  在数据前添加product
            tuli.unshift('product')
            //    将tuli数据赋值给图表
            option.dataset.dimensions = tuli
            //    console.log('图例',option.dataset.dimensions)

            // console.log(tuli,'323423')
            // 循环遍历后台数据 循环得出x轴数据 循环两次  七月八月
            let source = res.data.data.result[0].yAxis.data.map((item, index) => {
                // console.log(index, 'index')
                // 定义一个空数据  将tuli中的product截取掉  获得['教学用水', '安防设备用电', '生态用水', '生活用水']
                let inSource = tuli.slice(1)
                // console.log(inSource,'res')
                //isSoure// ['教学用水', '安防设备用电', '生态用水', '生活用水']
                // 定义一个空数据 存放 教学用水: 1150, 安防设备用电: 1590, 生态用水: 1680, 生活用水: 1590
                let obj = {}

                inSource.forEach((v, i) => {
                    // console.log(v, 'v', i)
                    // v ：'教学用水', '安防设备用电', '生态用水', '生活用水'  i：1150,1590,1680,1590  index:七月 八月
                    // 循环根据下标添加data数据
                    obj[v] = res.data.data.result[0].series[i].data[index]
                })
                // console.log(inSource, '132', obj);
                return {
                    product: item,//七月 八月
                    ...obj//{教学用水: 1150, 安防设备用电: 1590, 生态用水: 1680, 生活用水: 1590}
                }
            })
            option.dataset.source = source
            //    console.log(333,option)
            //    console.log(source);


            setoption({...option})
            // myChart.setOption(option)

               // 计算电水总量
                console.log(source,45323)
                let dian=0
                let shui=0
                source.forEach((item)=>{
                   for(let key in item){
                        if(key==='安防设备用电'){
                            dian+=item[key]
                        }else{
                            if(key !='product'){
                                shui+=item[key]
                            }
                        }
                   }
                })
                setDianall(dian)
                setShuiall(shui)
        })
        // myChart.setOption(option)

    }, [])

    return (
        <div className='rt'>
            {/* 标题 */}
            <div className='rtitle'>
                <div>水电用量</div>
            </div>
            {/* 水电统计图 */}
            <div className="shuidian">
                <div className='sd'>
                    <div className='sds'>
                        <img src={require('../../../assets/images/shui.png')} alt=''></img>
                        <span>总用水量{shuiall}</span>
                    </div>
                    <div className='sds'>
                        <img src={require('../../../assets/images/dian.png')} alt=''></img>
                        <span>总用电量{dianall}</span>
                    </div>
                </div>
                <div className='sdecharts'>
             <Myecharts option={option}></Myecharts>
                </div>
            </div>
        </div>
    )
}
export default RightTop;